<%@ page import="java.util.List" %>
<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2020/11/25
  Time: 14:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门薪资统计情况</title>
    <script src="${path}/echarts/js/echarts.min.js"></script>
    <script src="${path}/echarts/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--图表容器-->
<div id="echarts" style="width: 1000px;height:500px"></div>
</body>
<script>

    //1.调用echarts的init方法，初始化一个图表对象
    var myCharts = echarts.init(document.getElementById('echarts'));
    //组装图表对象的数据和参数
    var option = {
        //标题 包含一级标题和二级标题
        title : {
            text : 'Oracle公司各部门薪酬数据统计',
            subText : '本数据来源于数据库'
        },
        //提示框
        tooltip : {},
        //图例
        legend : {
            data : ['工资','奖金']
        },
        //X坐标轴
        xAxis : {
            data : []  //图表统计项，初始化为空
        },
        //y坐标轴
        yAxis : {},
        //图表系列 是一个数组，可能是多个对象
        series : [{
            name : '工资',
            type : 'bar',    //图像的类型 必须是echarts内置的类型
            data : []  //图表的数据，初始化为空
        },{
            name : '奖金',
            type : 'bar',    //图像的类型 必须是echarts内置的类型
            data : []  //图表的数据，初始化为空
        }]
    };

    //2.调用图表对象的setOption()方法，给图表设置各项参数
    myCharts.setOption(option);

    //在数据加载完之前，显示一段加载动画
    myCharts.showLoading();

    //创建3个JS数组，用来对应的 统计值(员工姓名、工资值、奖金值)
    var names = [];  //部门名称
    var salArray = [];  //工资
    var commArray = []; //奖金
    //使用jquery的ajax异步请求，向服务器请求统计数据
    $.ajax({
        url : '<%=request.getContextPath()%>/count/deptSal', //请求的路径
        dataType : 'json',//设置响应数据的格式
        data : {},//要提交的请求参数
        type : 'post',//请求的类型
        success : function(data){
            //data默认就是后台响应的数据
            console.log(data);

            //将服务器响应的list数据，装载在js数组中
            for(var i=0;i<data.length;i++){
                names.push(data[i].DNAME);
                salArray.push(data[i].TOTALSAL);
                commArray.push(data[i].TOTALCOMM);
            }
            //将统计项数组，设入 图表参数中  员工姓名，其实就是统计项，放入到X坐标data中
            option.xAxis.data = names;
            //将统计值数组，设入 图表参数中  工资值，放入第一个图表系列的data中
            option.series[0].data = salArray;
            //将统计值数组，设入 图表参数中  奖金值，放入第二个图表系列的data中
            option.series[1].data = commArray;
            //隐藏加载动画
            myCharts.hideLoading();
            //重新渲染图表
            myCharts.setOption(option);
        }

    });
</script>
</html>
